<template>
  <div class="video_wrapper">
    <div class="video_play">
      <div class="video_play--title">
        <el-tooltip
          effect="light"
          :content="videoName">
          <span>[标题] {{ videoName }}</span>
        </el-tooltip>
      </div>
      <video-player
        ref="player"
        class="video_play--area"
        :video="activeVideo"
        :options="videoOptions">
      </video-player>
    </div>
    <video-list
      :videos="videos"
      @video-change="handleChange">
    </video-list>
  </div>
</template>

<script>

import VideoPlayer from '@/components/VideoPlayer.vue'
import VideoList from './VideoList.vue'
import * as videoService from '@/api/services/videoService'
import * as thumbnailService from '@/api/services/thumbnailService'

export default {
  name: 'WsVideoApp',
  components: {
    VideoPlayer,
    VideoList
  },
  data () {
    return {
      videos: [],
      activeVideo: null,
      videoOptions: {
        preload: 'auto',
        autoplay: true,
        controls: true,
        suppressNotSupportedError: true,
        responsive: true,
        liveui: true
      }
    }
  },
  computed: {
    videoName () {
      if (this.activeVideo) {
        let index = this.activeVideo.name.lastIndexOf('.')
        if (index > -1) {
          return this.activeVideo.name.substring(0, index)
        }
      }
      return ''
    }
  },
  created () {
    this.doRefresh()
  },
  methods: {
    /**
     * 刷新数据
     */
    doRefresh () {
      this.$store.dispatch('listVideos', {
        query: {
          path: 'Videos'
        }
      }).then(response => {
        this.videos = this.parseData(response.data)
      }).catch((e) => {
        console.log('catch', e)
      })
    },

    /**
     * 解析数据
     * @param {Array} data 数据
     */
    parseData (data) {
      data = data || []
      data.forEach(d => {
        d.poster = thumbnailService.getUrl(d.id)
        d.sources = [{
          type: 'video/mp4',
          src: videoService.getUrl(d.id)
        }]
      })
      return data
    },

    /**
     * 视频切换
     * @param {Object} video 视频对象
     */
    handleChange (video) {
      this.activeVideo = video
    }
  }
}
</script>
